<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Dig Zhihu</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/materialize.min.css">

    <script type="text/javascript" src="js/jQuery.min.js"></script>
    <script type="text/javascript" src="js/materialize.min.js"></script>

</head>

<body>
    <div class="container grey-text text-darken-1">

        <div class="header">
            <h1 class="cmm-font-lighter">Dig <span class="blue-text">Zhihu</span></h1>
            <div class="row">
                <div class="col s3">
                    <form action="/" method="get">
                        <div class="input-field">
                            <input type="hidden" name="content" value="people">
                            <input type="text" class="" id="search" autocomplete="off" name="q">
                            <label for="search">Search</label>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <div class="body">
            <div class="row">
                {{#message}}
                <div class="col l6 m12">
                    <div class="card-panel hoverable">
                        <div class="row valign-wrapper">
                            <div class="col s2">
                                <a href="https://www.zhihu.com{{href}}" target="_blank">
                                    <img src="img/{{img}}" alt="test" class="circle responsive-img">
                                </a>
                            </div>
                            <div class="col s10">
                                <h5><a href="http://www.zhihu.com{{href}}" target="_blank">{{name}}</a><span>&nbsp;&nbsp;{{sex}}</span></h5>
                                <p>
                                    {{#intro}}
                                        {{intro}}
                                    {{/intro}}
                                    {{^intro}}
                                        Nothing here.
                                    {{/intro}}
                                </p>
                                <div>
                                    <small>
                                        回答：{{extra.answerNum}} &nbsp;
                                        文章：{{extra.postsNum}} &nbsp;
                                        关注者: {{extra.followersNum}}
                                    </small>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {{/message}}
            </div>
        </div>

    </div>
</body>
</html>